<template>
    <div class="xtx-infinite-loading" ref="container">
      <div class="loading" v-if="loading">
        <span class="img"></span>
        <span class="text">正在加载...</span>
      </div>
      <div class="none" v-if="finished">
        <span class="img"></span>
        <span class="text">亲，没有更多了</span>
      </div>
    </div>
  </template>
  <script>
  export default {
      props:{
          loading:{
              type:Boolean,
              default:false
          },
          finished:{
              type:Boolean,
              default:false
          }
      },
      mounted(){
        //数据懒加载缓存
          var obj=this.$refs.container
          const observer = new IntersectionObserver(([{isIntersecting}]) => {
          if(isIntersecting){
            //   console.log('到了')   
              //到达可视区域停止观察
              //函数调用
              if(!this.loading&&!this.finished){
                  this.$emit("getdata")
              }
          }   
      }, {})
      observer.observe(obj)
      }
  }
  </script>
  
  <style scoped lang='scss'>
  .xtx-infinite-loading {
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      .img {
        width: 50px;
        height: 50px;
        background: url('@/assets/img/load.gif') no-repeat center / contain;
      }
      .text {
        color: #999;
        font-size: 16px;
      }
    }
    .none {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      .img {
        width: 200px;
        height: 134px;
        background: url('@/assets/img/none.png') no-repeat center / contain;
      }
      .text {
        color: #999;
        font-size: 16px;
      }
    }
  }
  </style>